<template>
    <div class="contianer">

        <div class="baseMess">
            <div class="userMess">
                <div class="userHeadImg">
                    <el-avatar shape="square" :size="130" :src="userMess.avatar ? userMess.avatar : circleUrl"></el-avatar>

                </div>
                <div class="mess">
                    <span>{{ userMess.nickName }}</span><br>
                    <span>性别:{{ userMess.sex == 0 ? '男' : '女' }}</span><br>
                </div>
            </div>

            <div class="menu">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="基本信息" name="first">
                        <div class="menuLeft">
                            <el-upload class="avatar-uploader" action="api/util/uploadImg" name="imgFile"
                                :show-file-list="false" disabled="">
                                <img v-if="userMess.avatar" :src="userMess.avatar" class="avatar">
                                <i  class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                        <div class="menuRigth">
                            <el-form :model="userMess" ref="userMess" label-width="100px"
                                size="mini" class="demo-ruleForm">
                                <el-form-item label="昵称：" prop="name">
                                    <span >{{ userMess.nickName }}</span>

                                </el-form-item>

                                <el-form-item label="性别：" prop="resource">
                                    <span>
                                        <span v-if="userMess.sex == 0">男</span>
                                        <span v-if="userMess.sex == 1">女</span>
                                    </span>

                                </el-form-item>
                            </el-form>
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="点赞文章" name="second" class="paneDiv">
                        <el-empty v-if="tableDataSecond == ''" description="没有点赞文章"></el-empty>
                        <div class="oneArtcle" v-for="articleData in tableDataSecond">
                            <img class="articleImg" v-if="articleData.fileUid" :src="articleData.fileUid" alt="加载失败"
                                @click="oneArticle(articleData)">
                            <div class="articleMess" @click="oneArticle(articleData)">
                                <p class="titleList" v-html="articleData.title" @click="oneArticle(articleData)"></p>

                                <p class="summary" v-html="articleData.summary" @click="oneArticle(articleData)"></p>
                                <div class="articleMessData" @click="oneArticle(articleData)">
                                    <div class="createdTime">
                                        <p>发布时间</p>
                                        <p v-html="articleData.createdTime"></p>
                                    </div>
                                    <div class="clickCount">
                                        <p v-html="articleData.clickCount"></p>
                                        <p>阅读</p>
                                    </div>
                                    <div class="clickCount">
                                        <p v-html="articleData.likeCount"></p>
                                        <p>点赞</p>
                                    </div>
                                    <div class="collectCount">
                                        <p v-html="articleData.collectCount"></p>
                                        <p>收藏</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="收藏文章" name="third" class="paneDiv">
                        <el-empty v-if="tableDataThird == ''" description="没有收藏文章"></el-empty>
                        <div class="oneArtcle" v-for="articleData in tableDataThird">

                            <img class="articleImg" v-if="articleData.fileUid" :src="articleData.fileUid" alt="加载失败"
                                @click="oneArticle(articleData)">
                            <div class="articleMess" @click="oneArticle(articleData)">
                                <p class="titleList" v-html="articleData.title" @click="oneArticle(articleData)"></p>

                                <p class="summary" v-html="articleData.summary" @click="oneArticle(articleData)"></p>
                                <div class="articleMessData" @click="oneArticle(articleData)">
                                    <div class="createdTime">
                                        <p>发布时间</p>
                                        <p v-html="articleData.createdTime"></p>
                                    </div>
                                    <div class="clickCount">
                                        <p v-html="articleData.clickCount"></p>
                                        <p>阅读</p>
                                    </div>
                                    <div class="clickCount">
                                        <p v-html="articleData.likeCount"></p>
                                        <p>点赞</p>
                                    </div>
                                    <div class="collectCount">
                                        <p v-html="articleData.collectCount"></p>
                                        <p>收藏</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="最近浏览" name="fourth" class="paneDiv">
                        <el-empty v-if="tableDataFourth == ''" description="没有最近文章"></el-empty>
                        <div class="oneArtcle" v-for="articleData in tableDataFourth">
                            <img class="articleImg" v-if="articleData.fileUid" :src="articleData.fileUid" alt="加载失败"
                                @click="oneArticle(articleData)">
                            <div class="articleMess" @click="oneArticle(articleData)">
                                <p class="titleList" v-html="articleData.title" @click="oneArticle(articleData)"></p>

                                <p class="summary" v-html="articleData.summary" @click="oneArticle(articleData)"></p>
                                <div class="articleMessData" @click="oneArticle(articleData)">
                                    <div class="createdTime">
                                        <p>发布时间</p>
                                        <p v-html="articleData.createdTime"></p>
                                    </div>
                                    <div class="clickCount">
                                        <p v-html="articleData.clickCount"></p>
                                        <p>阅读</p>
                                    </div>
                                    <div class="clickCount">
                                        <p v-html="articleData.likeCount"></p>
                                        <p>点赞</p>
                                    </div>
                                    <div class="collectCount">
                                        <p v-html="articleData.collectCount"></p>
                                        <p>收藏</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>

        </div>
    </div>
</template>
<script>
import {$findAccountPublicById} from '@/assets/api/user.js'
import { findMyLickArticle } from '@/assets/api/user.js'
import { findMyCollectArticle } from '@/assets/api/user.js'
import { findMyLookArticle } from '@/assets/api/user.js'
export default {
    props: {
        setWidth: {
            type: Number,
            default: 400
        },
        setHeight: {
            type: Number,
            default: 400
        }
    },
    data() {
        return {
            activeName: 'first',
            circleUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
            userMess: {},
            id:sessionStorage.getItem("lookUserMessById"),
            tableDataSecond: '',
            tableDataThird: '',
            tableDataFourth: '',

        }
    },
    created() {
        this.init();
    },
    methods: {
        handleClick(tab, event) {
            if (tab.name == 'second') {
                this.findArticleSecond();
            } else if (tab.name == 'third') {
                this.findArticleThird();
            } else if (tab.name == 'fourth') {
                this.findArticleFourth();
            }
        },
        
        init() {
        
            $findAccountPublicById(this.id).then((res) =>{
                this.userMess = res.data.data.findAccountPublicById
                if(!res.data.success){
                    this.message(res);
                }
            }).catch((err) =>{
                console.log(err);
            })
        },

        //点击查看文章详情  
        oneArticle(articleData) {
            sessionStorage.setItem("id", this.id);
            this.$router.push({
                name: 'oneArticle'
            });
        },
    

        //查询点赞文章
        findArticleSecond() {
            findMyLickArticle(this.id).then((res) => {
                if (res.data.success) {
                    this.tableDataSecond = res.data.data.findLikeArticleById;
                } else {
                    this.message(res);
                }
            }).catch((err) =>{
               console.log(err);
            })
        },
        //查询收藏文章
        findArticleThird() {
            findMyCollectArticle(this.id).then((res) => {
                if (res.data.success) {
                    this.tableDataThird = res.data.data.findCollectArticleById;
                } else {
                    this.message(res);
                }
            }).catch((err) =>{
                console.log(err);
            })
        },
        //查询最近浏览文章
        findArticleFourth() {
            findMyLookArticle(this.id).then((res) => {
                if (res.data.success) {
                    this.tableDataFourth = res.data.data.findLookArticleById;
                }  else {
                    this.message(res);
                }
            }).catch((err) =>{
                console.log(err);
            })
        },
    }
}
</script>

<style scoped>
* {
    font-family: "Hiragino Sans GB"
}

* {
    margin: 0;
    padding: 0;
}


.paneDiv {
    margin-top: 20px;
    overflow-y: scroll;
    height: 280px;
}

.oneArtcle {

    min-width: 900px;
    width: 900px;
    margin: 0 auto;
    height: 120px;
    margin-bottom: 10px;
    border-bottom: solid 1px #cccccc;
    border-right: solid 1px #cccccc;
    border-top: solid 1px #e3e2e2;
    border-left: solid 1px #e3e2e2;
    padding: 5px;
}
.articleMess {
    float: left;

    width: 75%;
    height: 110px;
    margin: 5px;
}
.titleList {
    line-height: 40px;
    color: black;
    height: 40px;
    position: relative;
    top: -10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
}
.summary {
    height: 80px;
    font-size: 12px;
    /*弹性伸缩盒子*/
    display: -webkit-box;
    /*垂直排列*/
    -webkit-box-orient: vertical;
    /*只显示3行*/
    line-clamp: 3;
    -webkit-line-clamp: 3;
    /*溢出隐藏*/
    overflow: hidden;
    /*省略号代替*/
    text-overflow: ellipsis;
    position: relative;
    top: -15px;
    user-select: none;
}

.articleMessData p {
    float: left;
    margin-right: 25px;
    font-size: 10px;
    position: relative;
    top: -30px;
    user-select: none;
}

.articleMessData p:nth-child(1) {
    float: left;
    margin-right: 5px;
    font-size: 10px;
    position: relative;
    top: -30px;
}

.articleMessData {
    height: 0px;
}
.articleImg {

    background-color: white;
    float: left;
    width: 110px;
    height: 110px;
    margin: 5px;

}

.demo-ruleForm {
    width: 500px;
}


.menuUserName {
    width: 40%;
    margin-right: 30px;
    display: inline-block;
}

.menuRigth el-input {
    display: inline;
}

.menuLeft {
    float: left;
}

.menuRigth {
    margin: 10px;
    margin-left: 30px;
    float: left;
}

.avatar {
    height: 200px;

}

.avatar-uploader {
    height: 200px;
    width: 200px;

}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}



.userHeadImg {
    position: relative;
    top: 40px;
    left: 40px;
}

.mess {
    position: relative;
    top: -90px;
    left: 200px;
    width: 700px;
    height: 130px;
}

.mess span {
    margin-top: 240px;
    color: #676565;

}

.mess span:first-child {
    font-size: 30px;
    color: #676565;

}



.menu {
    padding: 20px
}

.userMess {
    height: 200px;
}

.contianer {}

.baseMess {
    border: solid 1px #cccccc;
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    border-radius: 20px
}
</style>